<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Debounce</title>
    <link href="../../css/common.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<h1>Debounce</h1>
<h2>1. 普通用法（全局防抖）</h2>
<button id="t1">点击</button>
<textarea id="ta1"></textarea>
<textarea id="ta2"></textarea>
<h2>3. 闭包方法（全局）</h2>
<button id="t3">点击</button>
<textarea id="ta3"></textarea>
</body>
<script src="../../../lib/baitu.min.js"></script>
<script>
    const {Debounce} = Baitu;
    const bt1 = document.querySelector("#t1");
    const ta1 = document.querySelector("#ta1");
    const ta2 = document.querySelector("#ta2");
    bt1.addEventListener('click', () => {
        Debounce.new('t1').of(() => {
            ta1.value = "普通用法";
        }, 2000)
        Debounce.of(() => {
            ta2.value = "普通用法2";
        }, 3000)
    });

    const bt3 = document.querySelector("#t3");
    const ta3 = document.querySelector("#ta3");
    // bt3.addEventListener('click', Debounce.with(() => {
    //     ta3.value = "闭包用法";
    // }, 3000));
    bt3.addEventListener('click', () => {
        Debounce.new('2').with(() => {
            ta3.value = "闭包用法";
        }, 2000)();
        Debounce.with(() => {
            ta2.value = "闭包用法2";
        }, 3000)();
    });
</script>
</html>
